<template>
	<view class="all">
		<view class="bg">
			<!-- <view class="lll" v-show="lll" @click="clickLll"></view> -->
			<view class="pointsmall">
				<view style="height: 155px;"></view>
				<view class="pointsmall-top">
					<view style="margin-left: 10px;margin-right: 10px;">
						<view class="pointsmall-tops top">
							<view class="iconfont iconprev" @click="clickBack"></view>
							<view class="ceshi">
								<view @click="clickJia">加十万</view></br>
								<view @click="clickJian">减十万</view>
								<view @click="clickWu"></view>
							</view>
						</view>
						<view class="pointsmall-tops center">
							<text class="pointsmall-top-span"  @click="clickSwith">积分商城</text>
							<view class="userIntegral">
									<view class="iconfont iconjinbi"></view>
									<view class="userIntegrals">
										<text v-show="!w">{{userIntegral}}</text>
										<text v-show="w">{{i}}</text>
										<text v-show="w && j != 0">.{{j}}</text>
										<text v-show="w">w</text>
									</view>
							</view>
						</view>
						<view class="pointsmall-tops bottom">
							<view style="position: relative;z-index: 99;">
								<view class="pointsmall-topselectA" @click="clickSelect">
									<text class="pointsmall-topselect-span">分类</text>
									<text class="iconfont iconarrow"></text>
								</view>
							</view>
							<view class="pointsmall-topselectB" v-show="selectChange == 1">
								<view class="pointsmall-topselectB-business" @click="clickTx(1)">腾讯业务</view>
								<view class="pointsmall-topselectB-business" @click="clickWb(2)">微博业务</view>
								<view class="pointsmall-topselectB-business"@click="clickSp(3)">视频业务</view>
								<view class="pointsmall-topselectB-business"@click="clickQb(0)">全部</view>
							</view>
							<view class="pointsmall-topswitch">
								<text class="pointsmall-topswitch-span">仅查看我能兑换的</text>
								<view class="pointsmall-topswitchs">
									<switch color="#4CD964" @change="changeSwitch"/>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pointsmall-bottom" :style="{backgroundColor: (this.wuyong == true ? '#fff' : '')}">
					<view class="pointsmall-bottoms" v-for="(item,index) in receiveData.data" v-show="receiveData.pointsmallBottoms[index] == 1" :key="index">
						<view class="pointsmall-bottoms-A">
							<view class="exchangePerson">{{receiveData.exchangePerson[index]}}人兑换</view>
						</view>
						<view class="pointsmall-bottoms-B">
							<view class="pointsmall-bottoms-Bimg">
								<image :src="item.imgUrl" class="pointsmall-bottoms-Bimgage" />
							</view>
							<view class="pointsmall-bottoms-Bs">
								<view class="pointsmall-bottoms-Bspan">{{item.pointsName}}</view>
								<view class="pointsmall-bottoms-Bpoint">
									<view class="iconfont iconjinbi jinbi2"></view>
									<text class="pointsmall-bottoms-Bpoint-count">{{lvzuanjifen[index]}}w</text>
								</view>
							</view>
							<view class="pointsmall-bottoms-Bbutton">
								<view class="pointsmall-bottoms-BbuttonA" v-show="receiveData.pointsExchange[index] == 1" @click="clickExchange(index)">立即兑换</view>
								<view class="pointsmall-bottoms-BbuttonB" v-show="receiveData.pointsExchange[index] == 0">积分不足</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pointsExchange from '../pointsExchange.js'
export default{
	name: 'PointSmall',
	data() {
		return {
			userIntegral: 1205000,
			userIntegrals: 0,
			i: 0,
			j: 1,
			w: false,
			selectChange: 0,
			Switch: 0,								//滑动按钮开关标识
			Switch2: 0,
			wuyong: false,
			point: pointsExchange,
			receiveData: {							//接收的数据
				data: [],
				exchangePerson: [],						//兑换人数
				lvzuan: [],								//每个兑换所需的积分
				pointsExchange: [],						//立即兑换按钮标识 1兑换 0不足
				pointsmallBottoms: [],					//每个元素隐藏标识 1显示 0隐藏
				businessIdentification: []				//业务标识 1tx 2wb
			},
			lll: false
		}
	},
	computed:{
		lvzuanjifen() {
			var e,r;
			var lvzuan2 = [];
			for(var k=0;k<this.receiveData.lvzuan.length;k++)
			{
				for(var i=1;i<= (this.receiveData.lvzuan[k]/10000);i++)
				{
					for(var j=0;j<= (this.receiveData.lvzuan[k]/1000-(i*10));j++)
					{
						e = j;
					}
					r = i;
				}
				lvzuan2.splice(k,0,r + '.' + e);
			}
			return lvzuan2;
		}
	},
	watch: {
		'userIntegral': {
			handler(newName, oldName) {
				this.userIntegrals = this.userIntegral;
				for(var i=0;i<this.receiveData.lvzuan.length;i++)
				{
					if(this.userIntegral >= this.receiveData.lvzuan[i])
					{
						this.receiveData.pointsExchange[i] = 1;
					}else{
						this.receiveData.pointsExchange[i] = 0;
					}
				}
			},
			deep: true
		},
		'userIntegrals': {
			handler(newName, oldName) {
				// console.log(newName, oldName);
				if(newName>9999)
				{
					this.w = true;
					for(var i=1;i<= (this.userIntegral/10000);i++)
					{
						for(var j=0;j<= (this.userIntegral/1000-(i*10));j++)
						{
							this.j = j;
						}
						this.i = i;
					}
				}else{
					this.w = false;
				}
				
			},
			// immediate: true,
			deep: true
		},
		'Switch': {
			handler(newName, oldName) {
				this.clickWu();
			},
			// immediate: true,
			deep: true
		}
	},
	mounted() {
		// this.getData();
		this.userIntegrals = this.userIntegral;
		this.receiveData.data = this.point.points;
		this.getDatas();
	},
	methods: {
		getDatas() {
			for(var i=0;i<this.receiveData.data.length;i++)
			{
				this.receiveData.exchangePerson.splice(i,0,this.receiveData.data[i].exchangePerson);
				this.receiveData.lvzuan.splice(i,0,this.receiveData.data[i].requiredIntegral);
				this.receiveData.pointsExchange.splice(i,0,this.receiveData.data[i].pointsExchange);
				this.receiveData.pointsmallBottoms.splice(i,0,this.receiveData.data[i].pointsmallBottoms);
				this.receiveData.businessIdentification.splice(i,0,this.receiveData.data[i].businessIdentification);
				// console.log(this.receiveData.pointsmallBottoms);
			}
			for(var i=0;i<this.receiveData.lvzuan.length;i++)
			{
				if(this.userIntegral > this.receiveData.lvzuan[i])
				{
					this.receiveData.pointsExchange[i] = 1;
				}else{
					this.receiveData.pointsExchange[i] = 0;
				}
			}
		},
		clickSelect() {
			if(this.selectChange == 0)
			{
				this.selectChange = 1;
			}else{
				this.selectChange = 0;
			}
			this.lll = !this.lll;
		},
		clickTx(e) {
			this.selectChange = 0;
			this.lll = !this.lll;
			for(var i=0;i<this.receiveData.lvzuan.length;i++)
			{
				this.receiveData.pointsmallBottoms[i] = 0;
				if(this.receiveData.businessIdentification[i] == e)
				{
					this.receiveData.pointsmallBottoms[i] = 1;
				}
			}
			// console.log(this.receiveData.pointsmallBottoms);
		},
		clickWb(e) {
			this.selectChange = 0;
			this.lll = !this.lll;
			for(var i=0;i<this.receiveData.lvzuan.length;i++)
			{
				this.receiveData.pointsmallBottoms[i] = 0;
				if(this.receiveData.businessIdentification[i] == e)
				{
					this.receiveData.pointsmallBottoms[i] = 1;
				}
			}
		},
		clickSp(e) {
			this.selectChange = 0;
			this.lll = !this.lll;
			for(var i=0;i<this.receiveData.lvzuan.length;i++)
			{
				this.receiveData.pointsmallBottoms[i] = 0;
				if(this.receiveData.businessIdentification[i] == e)
				{
					this.receiveData.pointsmallBottoms[i] = 1;
				}
			}
		},
		clickQb(e) {
			this.selectChange = 0;
			this.lll = !this.lll;
			for(var i=0;i<this.receiveData.lvzuan.length;i++)
			{
				this.receiveData.pointsmallBottoms[i] = 1;	
			}
		},
		clickBg() {
			if(this.selectChange == 1)
			{
				this.selectChange = 0;
			}
		},
		clickExchange(e) {
			this.userIntegral = this.userIntegral - this.receiveData.lvzuan[e];
			this.receiveData.exchangePerson[e] += 1;
		},
		clickBack() {
			uni.navigateBack({
			    delta: 1
			});
		},
		clickJia() {
			this.userIntegral += 100000;
		},
		clickJian() {
			this.userIntegral -= 100000;
		},
		clickWu() {
			this.wuyong = !this.wuyong;
		},
		changeSwitch() {
			this.selectChange = 0;
			if(this.lll == true){
				this.lll = !this.lll;
			}
			if(this.Switch == 0)
			{
				this.Switch = 1;
				for(var i=0;i<this.receiveData.lvzuan.length;i++)
				{
					if(this.receiveData.pointsExchange[i] == 1)
					{
						this.receiveData.pointsmallBottoms[i] = 1;
					}else{
						this.receiveData.pointsmallBottoms[i] = 0;
					}
				}
				// console.log(this.receiveData.pointsmallBottoms);
			}else{
				this.Switch = 0;
				for(var i=0;i<this.receiveData.lvzuan.length;i++)
				{
					this.receiveData.pointsmallBottoms[i] = 1;
				}
			}
		},
		clickSwith() {
			if(this.Switch2 == 0)
			{
				this.Switch2 = 1;
				for(var i=0;i<this.receiveData.lvzuan.length;i++)
				{
					if(this.receiveData.pointsExchange[i] == 1)
					{
						this.receiveData.pointsmallBottoms[i] = 1;
					}else{
						this.receiveData.pointsmallBottoms[i] = 0;
					}
				}
				console.log(this.receiveData.pointsmallBottoms);
			}else{
				this.Switch2 = 0;
				for(var i=0;i<this.receiveData.lvzuan.length;i++)
				{
					this.receiveData.pointsmallBottoms[i] = 1;
				}
			}
		},
		clickLll() {
			this.lll = !this.lll;
			this.selectChange = 0;
		}
	}
}
</script>

<style>
	.lll{
		background-color: rgb(0,0,0,0.5);
		position: absolute; 
		top: 0;
		left: 0;
		right: 0;
		height: 1640rpx;
		z-index: 3;
	}
	.ceshi{
		display: flex;
		margin-left: 50px;
		width: 200px;
		justify-content: space-between;
	}
	.bg{
		/* background: url(../../static/img/pointsmall.png) no-repeat; */
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
	}
	.pointsmall{
		margin-left: 10px;
		margin-right: 10px;
	}
	.pointsmall-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		height: 155px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		z-index: 4;
	}
	.pointsmall-tops{
		margin-top: 20px;
		display: flex;
	}
	.center{
		align-items: center;
	}
	.iconprev{
		font-size: 30px;
		margin-left: 5px;
	}
	.pointsmall-top-span{
		font-size: 24px;
		font-weight: 550;
		letter-spacing: 1px;
	}
	.userIntegral{
		height: 20px;
		width: 80px;
		background-color: rgb(255,239,235,0.5);
		border-radius: 20px;
		margin-left: 25px;
		display: flex;
		align-items: center;
		color: #FE6440;
	}
	.iconjinbi{
		font-size: 17px;
		margin-left: 5px;
	}
	.userIntegrals{
		font-size: 16px;
		margin-left: 7px;
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.pointsmall-topselectA{
		height: 25px;
		width: 55px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 2px solid #C0C0C0;
		position: relative;
		top: 5px;
		background-color: #fff;
		z-index: 99;
	}
	.pointsmall-topselectB{
		width: 55px;
		font-size: 12px;
		border-left: 2px solid #C0C0C0;
		border-right: 2px solid #C0C0C0;
		position: absolute;
		top: 155px;
		background-color: #fff;
		z-index: 9;
		border-radius: 5px;
	}
	.pointsmall-topselectB-business{
		height: 38px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2px solid #C0C0C0;
		border-radius: 5px;
	}
	.pointsmall-topselect-span{
		font-size: 13px;
		margin-left: 5px;
		margin-bottom: 1px;
		letter-spacing: 1px;
	}
	.iconarrow{
		margin-right: 1px;
		font-size: 20px;
	}
	.pointsmall-topswitch{
		display: flex;
		align-items: center;
	}
	.pointsmall-topswitch-span{
		font-size: 12px;
		letter-spacing: 1px;
		margin-right: 10px;
		height: 10px;
	}
	.pointsmall-topswitchs{
		
	}
	switch{
		/* transform: scale(.7); */
		zoom: .6;
	}
	.pointsmall-bottom{
		margin-top: 20px;
		background-color: #fff;
	}
	.pointsmall-bottoms{
		height: 170rpx;
		border-radius: 10px;
		border: 1px solid rgb(239,239,239,0.8);
		margin-top: 5px;
		margin-bottom: 5px;
		background-color: #EFEFEF;
	}
	.pointsmall-bottoms-A{
		height: 18px;
		border-radius: 10px 10px 0 0;
	}
	.exchangePerson{
		background-color: #C8C7CC;
		height: 18px;
		width: 60px;
		font-size: 12px;
		border-radius: 10px;
		text-align: center;
		color: #808080;
	}
	.pointsmall-bottoms-B{
		display: flex;
		margin-top: 3px;
		justify-content: space-between;
	}
	.pointsmall-bottoms-Bimg{
		width: 75px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.pointsmall-bottoms-Bimgage{
		height: 50px;
		width: 53px;
		z-index: 1;
	}
	.pointsmall-bottoms-Bs{
		margin-top: 3px;
		height: 50px;
		width: 150px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.pointsmall-bottoms-Bspan{
		font-size: 14px;
		font-weight: 550;
		letter-spacing: 1px;
		line-height: 20px;
		margin-left: 5px;
	}
	.pointsmall-bottoms-Bpoint{
		display: flex;
		color: #FE6440;
		align-items: center;
	}
	.jinbi2{
		font-size: 14px;
	}
	.pointsmall-bottoms-Bpoint-count{
		font-size: 14px;
		margin-left: 8px;
	}
	.pointsmall-bottoms-Bbutton{
		height: 60px;
		width: 95px;
		display: flex;
		align-items: center;
	}
	.pointsmall-bottoms-BbuttonA{
		background-color: rgb(255,239,235,0.5);
		height: 25px;
		width: 70px;
		border-radius: 10px;
		font-size: 13px;
		color: #FE6440;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.pointsmall-bottoms-BbuttonB{
		background-color: #C8C7CC;
		height: 25px;
		width: 70px;
		border-radius: 10px;
		font-size: 13px;
		color: #6C6C6C;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
